<!-- 游戏编辑弹窗 -->
<template>
    <el-dialog :title="isUpdate ? '修改游戏banner' : '添加游戏banner'" :visible="visible" width="1200px"
        :destroy-on-close="true" :before-close="confirmClose" @update:visible="updateVisible"
        :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px" style="margin: 10px 30px">
            <el-form-item label="广告名称:" prop="name">
                <el-input v-model="form.name" placeholder="请输入广告名称" clearable />
            </el-form-item>

            <el-form-item label="游戏banner:" prop="banner">
                <uploadImage :limit="1" v-model="form.banner"></uploadImage>
            </el-form-item>

            <!-- <el-form-item label="投放设备:" prop="device">
        <el-radio-group v-model="form.device">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">Android</el-radio>
          <el-radio :label="3">ios</el-radio>
        </el-radio-group>
      </el-form-item> -->

            <el-form-item label="投放平台:" prop="platform">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedDevice" @change="handleCheckedDeviceChange" border>
                    <el-checkbox v-for="item in arrDevice" :label="item.value" :key="item.value">{{ item.label
                        }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>


            <el-form-item label="是否启用:" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="展示时间:" prop="time">
                <el-date-picker style="width: 100%" v-model="form.time" type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss" label-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="banner排序:" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序权重(权重越大越靠前)" clearable />
            </el-form-item>

            <el-form-item label="banner详情:" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio :label="1">跳转外部链接</el-radio>
                    <el-radio :label="3">跳转内部链接</el-radio>
                    <el-radio :label="2">自定义内容</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item prop="url" v-if="form.type == 1 || form.type == 3">
                <el-input v-model="form.url" placeholder="请输入跳转链接" clearable />
            </el-form-item>

            <el-form-item prop="content" v-if="form.type == 2">
                <tinymce-editor v-model="form.content" :init="initEditor" />
            </el-form-item>

            <el-form-item label="备注:" prop="desc">
                <el-input v-model="form.desc" placeholder="备注" clearable />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="confirmClose()">取消</el-button>
            <el-button type="primary" @click="save" :loading="loading">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import uploadImage from "@/components/uploadImage";
import TinymceEditor from "@/components/TinymceEditor";

export default {
    name: "BoxGameEdit",
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
    },
    components: { uploadImage, TinymceEditor },

    data() {
        return {
            direction: "rtl",
            // 表单数据
            form: Object.assign({ status: 1, type: 1 }, this.data),
            where: {},
            // 表单验证规则
            rules: {
                name: [
                    { required: true, message: "请输入广告名称", trigger: "blur" },
                ],
                banner: [{ required: true, message: "请输入上传banner", trigger: "blur" }],
                device: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
                status: [{ required: true, message: "请选择是否启用", trigger: "blur" }],
                time: [{ required: true, message: "请选择展示时间", trigger: "blur" }],
                type: [{ required: true, message: "请选择类型", trigger: "blur" }],
            },
            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false,
            checkAll: false,
            isIndeterminate: true,
            checkedDevice: [],
            arrDevice: [
                // {
                //     label: "全部",
                //     value: 1,
                // },
                {
                    label: "安卓",
                    value: 2
                },
                {
                    label: "IOS",
                    value: 3
                },
                {
                    label: "PAD",
                    value: 4
                },
                {
                    label: "IPAD",
                    value: 5
                },
                {
                    label: "PC",
                    value: 6
                },
            ],
        };
    },
    watch: {
        data: {
            immediate: true,
            handler() {
                console.log('data',this.data);
                if (this.data) {
                    // this.form = Object.assign({}, this.data);
                    // console.log('data',this.form.device.length);
                    if (this.form.device) {                  
                        if (this.form.device.includes('1')) {
                            this.handleCheckAllChange(true)
                            this.checkAll = true
                        }else{
                            this.form.device = this.form.device.split(',')
                            this.checkedDevice = this.form.device.map(Number)
                            console.log('checkedDevice',this.checkedDevice);
                            this.checkAll = false
                        }
                    }
                    this.$set(this.form, 'time', [this.$util.toDateString(this.data.publish_start_time), this.$util.toDateString(this.data.publish_end_time)])
                }
            },
            deep: true // 开启深度监听

            // visible(val) {
            //     if (val) {
            //         if (this.data) {
            //             this.isUpdate = true;
            //         } else {
            //             this.form = {};
            //             this.isUpdate = false;
            //         }
            //     }
            // }
        }
    },

    methods: {
        save() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    console.log('form', this.form);
                    this.form.game_id = this.data.game_id;
                    this.loading = true;
                    this.$http
                        .post("/BoxGameBanner/edit", this.form)
                        .then((res) => {
                            this.loading = false;
                            if (res.data.code === 0) {
                                this.$message.success(res.data.msg);
                                if (!this.isUpdate) {
                                    this.form = {};
                                }
                                this.updateVisible(false);
                                this.$emit("done");
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch((e) => {
                            this.loading = false;
                            this.$message.error(e.message);
                        });
                } else {
                    return false;
                }
            });
        },
        /* 更新visible */
        updateVisible(value) {
            this.$emit("update:visible", value);
        },

        confirmClose() {
            this.$confirm("确定要返回吗？", "温馨提示")
                .then(() => {
                    this.updateVisible(false);
                    this.initForm();
                })
                .catch(() => {
                });
        },

        handleCheckAllChange(val) {
            console.log(val);
            this.checkedDevice = val ? [2, 3, 4, 5, 6] : [];
            this.isIndeterminate = false;
            if (val) {
                this.form.device = 1;
            } else {
                this.form.device = ''
            }
        },

        handleCheckedDeviceChange(value) {
            console.log(value);
            console.log('checkDevice',this.checkedDevice);
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.arrDevice.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.arrDevice.length;
            if (this.checkAll) {
                this.form.device = 1;
            } else {
                this.form.device = value.join(',');
            }
        }
    },
};
</script>

<style scoped></style>
